@import 'public';
// 头部
.top-nav{
	position: fixed;
	top: 0;
	background-color: white;
	z-index: 1001;
	.top-title{
		text-align: center;
		font-size: 3.5rem;
		font-weight: bold;
		line-height: 7.5rem;
		height: 7.5rem;
		&::before{
			content: '';
			display: inline-block;
			float: left;
			margin-top: 2.5rem;
			width: 2rem;
			height: 2rem;
			border: .2rem solid;
			border-top:0;
			border-right: 0;
			transform: rotate(45deg);
			margin-left:2rem ;
		}
	}
}
// 上层广告
.main-banner{
	margin-top: 9.5rem;
	padding-top: 1px;
	height: 75rem;
	background-image: url(https://img.imgdb.cn/item/6034f7605f4313ce255b4736.jpg);
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;

	.banner-msg{
		width: 49rem;
		height: 6.7rem;
		border-radius: 1.5rem;
		background-color: rgba(60,60,60,.8);
		float: left;
		margin-top: 2rem;
		margin-left: 2rem;
		display:flex;
		position: relative;
		.user-face{
			display: inline-block;
			width: 6.7rem;
			height: 6.7rem;
			border-radius: 3.35rem;
			background-image: url(https://img.imgdb.cn/item/6035cc315f4313ce25abeac9.png);
			background-position: center;
			background-size: cover;
		}
		p{
			display: inline-block;
			height: 6.7rem;
			line-height: 6.7rem;
			font-size: 3rem;
			color: white;
			text-align: left;
			margin-left: 2rem;
		}
	}
	.banner-list{
		position: absolute;
		top: 47rem;
		left: 2rem;
		height: 40rem;
		overflow: hidden;
		ul{
			display: flex;
			margin-top: 1rem;
			position: relative;
			li{
				margin-right: 2rem;
				flex-shrink: 0;
				width: 68rem;
				height: 35rem;
				z-index: 1000;
				border-radius: 1.5rem;
				background-color: white;
				box-shadow:2px 2px 10px #909090;
				.banner-item{
					background-color: white;
					img{
						width: 50%;
						height: 100%;
						float: left;
					}
					.banner-des{
						width: 50%;
						height: 100%;
						float: left;
						.des-title{
							font-size: 3rem;
							color: #606060;
							margin: 2rem 2.5rem 0 2.5rem;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.des-price{
							display: inline-block;
							font-size: 3.5rem;
							color: #ff433d;
							font-weight:bold;
							margin: 1.5rem 2.5rem 0 2.5rem;
						}
						.des-num{
							display: inline-block;
							font-size: 3rem;
							// font-weight:bold;
						}
						.des-oldprice{
							font-size: 3rem;
							color: #606060;
							text-decoration:line-through;
							margin: 1.5rem 2.5rem 0 2.5rem;
						}
						.progress-bar{
							display: inline-block;
							width: 12rem;
							height: 2rem;
							border-radius: 1rem;
							background-color: #dbdbdb;
							margin: 1.5rem 2.5rem 0 2.5rem;
							.progress{
								width: 77%;
								height: 100%;
								border-radius: 1rem;
								background-color: #ff492e;
							}
						}
						.progress-num{
							display: inline-block;
							font-size: 1.5rem;
							color: #606060;
						}
						button{
							width: 30rem;
							height: 6rem;
							border-radius: 3rem;
							background-color: #ff492e;
							color: white;
							margin: 1.5rem 2.5rem 0 2.5rem;
							font-size: 3rem;
							
						}
					}
				}
			}
		}
	}
}
// 商品列表
.shop-list{
	.list-nav{
		overflow: hidden;
		height: 10rem;
		ul{
			display: flex;
			padding: 0;
			position: relative;
			li{
				font-size: 3rem;
				color: #898989;
				text-align: center;
				flex-shrink: 0;
				position: relative;
				width: 20rem;
				height: 10rem;
				line-height: 10rem;
				&.active {
				    font-size: 3.2rem;
					color: black;
				    font-weight: bold;
				}
				&.active:after {
				    content: '';
				    display: block;
				    width: 10rem;
				    height: 1rem;
				    background-color: #ff492e;
				    border-radius: 0.5rem;
				    position: absolute;
				    top: 9rem;
				    left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.list-space{
		.list-item{
			width: 100%;
			height: 32rem;
			img{
				width: 40%;
				height: 100%;
				float: left;
			}
			.item-des{
				width: 60%;
				height: 100%;
				float: left;
				.des-title{
					font-size: 3rem;
					color: #606060;
					margin: 2rem 2.5rem 0 2.5rem;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.des-price{
					display: inline-block;
					font-size: 3.5rem;
					color: #ff433d;
					font-weight:bold;
					margin: 1.5rem 2.5rem 0 2.5rem;
				}
				.des-num{
					display: inline-block;
					font-size: 3rem;
					// font-weight:bold;
				}
				.des-oldprice{
					font-size: 3rem;
					color: #606060;
					text-decoration:line-through;
					margin: 1.5rem 2.5rem 0 2.5rem;
				}
				.progress-bar{
					display: inline-block;
					width: 12rem;
					height: 2rem;
					border-radius: 1rem;
					background-color: #dbdbdb;
					margin: 1.5rem 0rem 0 2.5rem;
					.progress{
						width: 77%;
						height: 100%;
						border-radius: 1rem;
						background-color: #ff492e;
					}
				}
				.progress-num{
					display: inline-block;
					font-size: 1.5rem;
					color: #606060;
				}
				button{
					display: inline-block;
					width: 14rem;
					height: 6rem;
					border-radius: 3rem;
					background-color: #ff492e;
					color: white;
					margin: 1.5rem 0rem 0 2.5rem;
					font-size: 3rem;
					
				}
			}
		}
	}
}
.white-container{
	height: 10rem;
}
.tabbar{
	height: 10rem;
	position: fixed;
	bottom: 0;
	.choose{
		float: left;
		height: 10rem;
		width: 50%;
		text-align: center;
		line-height: 10rem;
		vertical-align: middle;
		font-size: 3.5rem;
		font-weight: bold;
		img{
			width: 5rem;
			height: 5rem;
			vertical-align: middle;
		}
	}
}